<template>
	<!-- #ifdef APP-NVUE -->
	<cell ref="u-index-item">
		<!-- #endif -->
		<view class="u-index-item" :id="`u-index-item-${id}`" :class="[`u-index-item-${id}`]">
			<slot />
		</view>
		<!-- #ifdef APP-NVUE -->
	</cell>
	<!-- #endif -->
</template>

<script>
import props from './props.js';
import mpMixin from '../../libs/mixin/mpMixin.js';
import mixin from '../../libs/mixin/mixin.js';
// #ifdef APP-NVUE
// 由于weex为阿里的KPI业绩考核的产物，所以不支持百分比单位，这里需要通过dom查询组件的宽度
const dom = uni.requireNativePlugin('dom')
// #endif
/**
 * IndexItem 
 * @description 
 * @tutorial https://uiadmin.net/uview-plus/components/indexList.html
 * @property {String}
 * @event {Function}
 * @example
 */
export default {
	name: 'u-index-item',
	mixins: [mpMixin, mixin, props],
	data() {
		return {
			// 本组件到滚动条顶部的距离
			top: 0,
			height: 0,
			id: ''
		}
	},
	created() {
		// 子组件u-index-anchor的实例
		this.anchor = {}
	},
	mounted() {
		this.init()
	},
	methods: {
		init() {
			// 此处会活动父组件实例，并赋值给实例的parent属性
			this.getParentData('u-index-list')
			if (!this.parent) {
				return uni.$u.error('u-index-item必须要搭配u-index-list组件使用')
			}
			uni.$u.sleep().then(() => {
				this.getIndexItemRect().then(size => {
					// 由于对象的引用特性，此处会同时生效到父组件的children数组的本实例的top属性中，供父组件判断读取
					let top = 0;
					// #ifdef MP-WEIXIN
					top = this.customNavHeight
					// #endif
					this.top = Math.ceil(size.top - top)
					this.height = Math.ceil(size.height)
				})
			})
		},
		getIndexItemRect() {
			return new Promise(resolve => {
				// #ifndef APP-NVUE
				this.$uGetRect('.u-index-item').then(size => {
					resolve(size)
				})
				// #endif

				// #ifdef APP-NVUE
				const ref = this.$refs['u-index-item']
				dom.getComponentRect(ref, res => {
					resolve(res.size)
				})
				// #endif
			})
		}
	},
}
</script>

<style lang="scss" scoped>
@import "../../libs/css/components.scss";
</style>
